<script setup>
import {onBeforeMount, reactive, toRefs, ref, onMounted} from "vue"
// import {addClusterHandler as addHandler,updateClusterHandler as updateHandler} from "../../api/cluster.js";
import {updateNodeHandler as updateHandler} from "../../api/node.js";
import {ElMessage} from "element-plus";
import {object2List,deleteTableRow,list2Object} from "../../utils/utils.js";

const  data = reactive({
  itemForm:{
    spec: {
      taints: []
    }
  },
  labelList: [],
  // 定义污点的选项
  taintsOptions: [
    {
      label: "禁止调度",
      value: "NoSchedule"
    },
    {
      label: "驱逐",
      value: "NoExecute"
    },
    {
      label: "尽量不调度",
      value: "PreferNoSchedule"
    }
  ]
})
const props=defineProps({
  itemForm: {
    type: Object
  },
  clusterId: {
    type: String,
  }
})

onMounted(()=>{
  // 把对象转成一个字符串
  const  jsonString = JSON.stringify(props.itemForm)
  // 在把字符串转换成json,最后赋值data.userForm
  data.itemForm = JSON.parse(jsonString)

  data.labelList = object2List(data.itemForm.metadata.labels)  // 把labels 对象转换成key:valued的形式
  console.log("转换后的对象是：",data.labelList)
})

const emits=defineEmits(["rollback"])
const itemFormRef = ref()
let loading = ref(false)

// 实现清空表单的逻辑
const clear =()=>{
  itemFormRef.value.resetFields()
}

// 添加用户的逻辑
const submit =()=>{
  loading.value=true
  console.log("查看加载",loading.value)
  // 把labelList 转成对象
 const labelObj =  list2Object(data.labelList)
  // 赋值给itemForm
  data.itemForm.metadata.labels = labelObj
  // data.itemForm.spec.taints =
  console.log("更新后的数据：", data.itemForm)

  updateHandler(props.clusterId,data.itemForm.metadata.name,data.itemForm).then((response)=>{
    ElMessage({
      type: 'success',
      message: response.data.message,
    })
    loading.value=false
    emits("rollback",props.clusterId)
  })
}

// 添加lable表格事件方法
const addLabelRow = ()=>{
  const lableRow={
    key: "",
    value: ""
  }
  // 在列表后面添加数据
  // 在列表前面添加数据
  data.labelList.unshift(lableRow)
}
// 添加污点表格事件方法
const addTaintRow = ()=>{
  const taintRow={
    key: "",
    value: "",
    effect: "NoSchedule",
  }
  // 在列表后面添加数据
  // 在列表前面添加数据
  data.itemForm.spec.taints.unshift(taintRow)
}
const  {itemForm,labelList,taintsOptions} = toRefs(data)
</script>

<template>
  <el-form  label-width= "90px" ref="itemFormRef"  :model="itemForm" >
    <div>
      <el-tabs >

        <el-tab-pane  label="标签配置">
          <!--   标签配置的表格     -->
          <el-table border :data="labelList" style="width: 100%" height="400px">
            <el-table-column align="center"  prop="key" label="Key" >
              <template #default="scope">
                <el-input v-model="scope.row.key" placeholder="请输入标签的key" />
              </template>
            </el-table-column>
            <el-table-column align="center"  prop="value" label="Value">
              <template #default="scope">
                <el-input v-model="scope.row.value"  placeholder="请输入标签的value" />
              </template>
            </el-table-column>
            <el-table-column align="center"  fixed="right" width="140px"  >
              <template #header>
                <el-button link type="primary" @click="addLabelRow">添加</el-button>
              </template>
              <template #default="scope">
                <el-button link type="warning" @click="deleteTableRow(labelList,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="污点配置">
          <!--   污点配置的表格     -->
          <el-table border :data="itemForm.spec.taints" style="width: 100%" height="400px">
            <el-table-column align="center"  prop="key" label="Key" >
              <template #default="scope">
                <el-input v-model="scope.row.key" placeholder="请输入污点的key"/>
              </template>
            </el-table-column>
            <el-table-column align="center"  prop="value" label="Value">
              <template #default="scope">
                <el-input v-model="scope.row.value"  placeholder="请输入污点的value" />
              </template>
            </el-table-column>
            <el-table-column align="center"  prop="effect" label="Effect">
              <template #default="scope">
                <el-select v-model="scope.row.effect" placeholder="Select" style="width: 240px">
                  <el-option
                      v-for="item in taintsOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center"  fixed="right" width="140px"  >
              <template #header>
                <el-button link type="primary" @click="addTaintRow">添加</el-button>
              </template>
              <template #default="scope">
                <el-button link type="warning" @click="deleteTableRow(itemForm.spec.taints,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
      </el-tabs>
    </div>
    <div   class="dialog-footer">
      <el-button type="primary" @click="submit()" >更新</el-button>
    </div>
  </el-form>
</template>

<style scoped>
.form-item{
  width: 400px;
  margin: 0 auto 20px 0;
}
.dialog-footer{
  display: block;
  margin-top: 20px;
}
.class-info {
  display: flex;
  flex-direction: row;
}
</style>